<template>
	<view class="content">
		<view class="type-c" v-if="list.length" style="margin-top: 30rpx;">
			<view class="cell-group margin-cell-group" v-for="(item, index) in list" :key="index"
				style="display: flex;align-items: center;">
				<image src="/static/jfjf.png" style="width: 50rpx;height: 50rpx;margin-right: 15rpx;" mode=""></image>
				<view class="Right" style="flex: 1;">
					<view class="cell-item" style="justify-content: space-between;min-height: 0;margin-bottom: 12rpx;">
						<view class="cell-item-hd">
							<view class='cell-hd-title' style="font-size: 28rpx;font-weight: bold;color: #fff;">
								{{ item.remarks }}
							</view>
						</view>
						<view class="cell-item-ft" style="font-size: 28rpx;font-weight: bold;color: #F2D7AAFF;">
							{{ item.money }}
						</view>

					</view>
					<view class="cell-item" style="min-height: 0;">
						<view class="cell-item-ft">
							<view class="cell-ft-p" style="font-size: 22rpx;color: #fff;">
								{{ item.ctime }}
							</view>
						</view>
						<view class="cell-item-hd">
							<view class='cell-hd-title' style="font-size: 28rpx;font-weight: bold;color: #F2D7AAFF;"
								v-if="item.num>0">
								+{{ item.num }}
							</view>
							<view class='cell-hd-title' style="font-size: 28rpx;font-weight: bold;color: #F2D7AAFF;"
								v-else>{{ item.num }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<view class="order-none" v-else>
			<image class="balance-none-img" src="/static/image/order.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				objectType: ['全部', '消费', '退款', '充值', '提现', '佣金', '平台调整'],
				index: 0, // 默认选中的类型	索引
				page: 1,
				limit: 10,
				list: [],
				states: [0, 1, 2, 3, 4, 5, 7], // 不同类型的状态
				loadStatus: 'more'
			}
		},
		onLoad(e) {
			if (e.status) {
				this.index = this.states.indexOf(parseInt(e.status));
			} else {
				this.balances() //修复多次加载问题
			}
		},
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.balances()
			}
		},
		methods: {
			// 切换类型
			changeState(e) {
				if (this.index !== e.target.value) {
					this.index = e.target.value;
					this.page = 1
					this.list = []
				}
			},
			// 获取余额明细 
			balances() {
				let data = {
					type: this.states[this.index],
					page: this.page,
					limit: this.limit
				}

				this.loadStatus = 'loading'

				this.$api.pointLog(data, res => {
					if (res.status) {
						if (this.page >= res.total) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page++
						}
						this.list = [...this.list, ...res.data]
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		},
		watch: {
			index() {
				this.balances();
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-list {
		overflow: hidden;
	}

	.cell-item {
		background-color: transparent;
		width: auto !important;
	}

	.uni-list-cell-db {
		float: left;
		margin-right: 6upx;
		display: inline-block;
		height: 50upx;
		line-height: 50upx;
	}

	.uni-list .right-img {
		float: left;
	}

	.cell-item-bd {
		font-size: 26upx;
	}

	.cell-group {
		background-color: #202126FF;
	}

	.type-c .cell-group {
		margin: 10rpx 30rpx;
		padding: 38rpx 24rpx 37rpx 22rpx;
		border-radius: 20rpx;
	}

	.type-c .cell-item {
		border: none;
		min-height: 70upx;
		padding: 0 26upx 0 0;
	}

	.type-c .cell-item .red-price {
		font-size: 50upx;
	}

	.type-c .cell-item .color-9 {
		font-size: 24upx;
	}

	.order-none {
		text-align: center;
		padding: 200upx 0;
	}

	.balance-none-img {
		width: 274upx;
		height: 274upx;
	}

	.down-pull {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 120upx;
	}
</style>